<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片主色提取与渐变背景生成器 - 增强版</title>
    <link rel="stylesheet" href="color-extractor.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            transition: background 0.5s ease;
        }

        header {
            background-color: #0064ff;
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            margin: 0;
            font-size: 24px;
        }

        .description {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
            text-align: center;
            color: #555;
        }

        .features {
            max-width: 800px;
            margin: 0 auto 30px;
            padding: 0 20px;
        }

        .features ul {
            columns: 2;
            padding-left: 20px;
        }

        .features li {
            margin-bottom: 8px;
            color: #555;
        }

        footer {
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
<header>
    <h1>图片主色提取与渐变背景生成器 - 增强版</h1>
</header>

<div class="description">
    <p>上传一张图片，自动提取主色并生成和谐的渐变背景。可以调整渐变方向和颜色数量，生成最适合您的背景效果。</p>
</div>

<div class="features">
    <ul>
        <li>高精度色彩提取算法，更准确识别主色</li>
        <li>支持最多8种颜色的渐变组合</li>
        <li>提供线性、径向、角度三种渐变效果</li>
        <li>高清背景导出功能 (1920x1080)</li>
        <li>重置功能，随时更换图片</li>
        <li>一键复制CSS代码</li>
        <li>拖放上传支持</li>
        <li>响应式设计，适配各种设备</li>
    </ul>
</div>

<div id="colorExtractor"></div>

<footer>
    <p>图片主色提取与渐变背景生成器 &copy; 2023</p>
</footer>

<script src="color-extractor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Initializing color extractor...');

        // 初始化颜色提取器
        const colorExtractor = new ImageColorExtractor({
            container: '#colorExtractor',
            gradientDirection: 'to right',
            colorCount: 8,
            maxColors: 8,
            quality: 5
        });

        console.log('Color extractor initialized');

        // 添加全局错误处理
        window.addEventListener('error', function(e) {
            console.error('Global error:', e.message, e.filename, e.lineno);
        });
    });
</script>
</body>
</html>

